<template>
  <div>
    <p>请选择你要购买的书籍</p>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        <span>{{ item.name }}</span>
        &nbsp;
        <button @click="btn(index)">买书</button>
      </li>
    </ul>
    <table border="1" width="500" cellspacing="0">
      <tr>
        <th>序号</th>
        <th>书名</th>
        <th>单价</th>
        <th>数量</th>
        <th>合计</th>
      </tr>

      <tr v-for="(item, index) in arr" :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.count }}</td>
        <td>{{ item.price * item.count }}</td>
      </tr>
    </table>
    <p>总价格为:{{ allPrice }}</p>
  </div>
</template>

<script>
// 目标：买书
// 1.md里赋值标签
// 2.铺数据
// 2.0v-for把数组铺设到表格上（合计注意）
// 2.1v-for把数组铺设到ul和li上（按钮）
// 2.2总价定义计算属性（把累加过程提前写好）
// 3.js交货----买书（点击事件）
// 3.0传递索引下去，用索引换对象，让count自增1
export default {
  data () {
    return {
      arr: [
        {
          name: "水浒传",
          price: 107,
          count: 0,
        },
        {
          name: "西游记",
          price: 192,
          count: 0,
        },
        {
          name: "三国演义",
          price: 219,
          count: 0,
        },
        {
          name: "红楼梦",
          price: 178,
          count: 0,
        },
      ],
    }
  },
  // 总价格
  computed: {
    allPrice () {
      // 数组里每个对象的单价*数量，类驾到一起
      // 参数b是a的初始值
      // a用于累加的，b就是遍历么个对象
      let resule = this.arr.reduce((a, b) => {
        // 累加过程
        a = a + b.price * b.count
        // 本次累加的结果，return到函数体里下一次执行时，作为a初始值
        return a
      }, 0)
      return resule
    }
  },
  // 方法
  methods: {
    btn (i) {
      this.arr[i].count++

    }
  }
};
</script>